<template>
  <div class="tutorial-container">
    <h1 class="tutorial-title">{{ title }}</h1>
    <div class="tutorial-content">
      <component :is="markdown" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TutorialView',
  props: {
    markdown: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      default: '教程'
    }
  }
}
</script>

<style scoped>
.tutorial-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.tutorial-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.tutorial-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
</style> 